<template>
	<div class="layout-padding">
		<HyTable
			:searchFields="searchFields"
			:tableConfig="tableConfig"
			:searchConfig="searchConfig"
			:tableColumns="tableColumns"
			ref="hyTableRef"
			:searchButtonConfig="{
				span: 4,
				offset: 1,
			}"
			:searchDefault="searchDefault"
			:searchData="searchData"
			:tabls="tabls"
			@handleClick="handleClick"
		>
			<template #statusSlot="{ row }">
				<el-tag :class="setColor(row.status)">{{ chengStatu(row.status) }}</el-tag>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="130">
					<template #default="{ row }">
						<div class="flex items-center w-full justify-between">
							<el-button text type="primary" style="margin-top: -5px" @click="showDetails(row)">查看</el-button>
							<div class="moreBot" v-if="row.status != 3 && canCancel(row)">
								<el-dropdown style="color: var(--el-color-primary)">
									<span class="el-dropdown-link">
										更多<el-icon class="el-icon--right"><arrow-down color="var(--el-color-primary)" /></el-icon>
									</span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item
												style="color: var(--el-color-primary)"
												:icon="Document"
												v-if="['1'].indexOf(row.status) != -1"
												@click="showDetails(row)"
												>申报</el-dropdown-item
											>
											<el-dropdown-item v-if="['1', '4'].indexOf(row.status) != -1" style="color: #52c41a" :icon="Edit" @click="reToEdit(row)"
												>编辑</el-dropdown-item
											>
											<el-dropdown-item v-if="['1'].indexOf(row.status) != -1" style="color: #f74e56" :icon="Delete" @click="del(row.id)"
												>删除</el-dropdown-item
											>
											<el-dropdown-item
												v-if="['2'].indexOf(row.status) != -1 && row.canCancel"
												style="color: #f5222d"
												:icon="Reading"
												@click="withdraw(row.processInstanceId)"
												>撤销</el-dropdown-item
											>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</div>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
</template>

<script lang="ts" setup>
import { useDict } from '/@/hooks/dict';
const { implement_business_type } = useDict('implement_business_type');
import { changePage, changeDelete } from '/@/api/Implementation/tableImple';
import { ArrowDown, Document, Edit, Delete, Reading } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import HyTable from '/@/components/HyTable/components/TableLayout/tabLayout.vue';
import { cancel } from '@cqdcg/admin/views/flow/task/cancel';
const router = useRouter();
const hyTableRef = ref();
const tabs = ref('tabs');
const tabls = computed(() => {
	return {
		type: 'card',
		tablesList: [
			{
				lable: '开发项目',
				name: 1,
			},
			{
				lable: '运维项目',
				name: 2,
			},
		],
	};
});
const tabNum = ref(1); //默认请求tab值
const searchDefault = ref({
	type: 1,
});
const searchData = ref({
	type: tabNum.value,
});
//接收tab值调用接口
const handleClick = (tab: any) => {
	tabNum.value = tab;
	searchDefault.value.type = tab;
	//重置表单 handleRest是重置表单调接口 getTableData是直接调接口
	hyTableRef.value.handleRest();
};
const getTableData = () => {
	hyTableRef.value.getTableData();
};

const tableColumns = computed(() => {
	return [
		{ prop: 'appCode', label: '数字化应用编号', width: 260 },
		{ prop: 'name', label: '数字化应用名称', width: 260 },
		{ prop: 'domain', label: '所属领域', width: 150 },
		{ prop: 'responsibleDept', label: '责任部门', width: 260 },
		{ prop: 'leadDept', label: '应用牵头部门', width: 260 },
		{ prop: 'time', label: '申报时间' },
		{ prop: 'status', label: '状态', slot: 'statusSlot', width: 160, fixed: 'right' },
	];
});
const searchConfig = ref({
	labelWidth: '100px',
	span: 4,
	offset: 0,
	type: 'search',
	title: '应用变更',
	show: true,
});
const tableConfig = computed(() => {
	return {
		request: changePage,
	};
});
// 配置搜索
const searchFields = computed(() => {
	return {
		name: {
			type: 'input',
			label: '关键字',
			span: 4,
		},
		status: {
			type: 'select',
			label: '状态',
			span: 4,
			options: implement_business_type.value,
		},
		timeArr: {
			type: 'date',
			span: 8,
			picker: 'datetimerange',
			label: '申报时间',
		},
	};
});
const chengStatu = (statu: any) => {
	if (!statu) {
		return;
	}
	let rea = '';
	implement_business_type.value.forEach((item: any) => {
		if (item.value == statu) {
			rea = item.label;
		}
	});
	return rea;
};
//设置颜色
const setColor = (type: string) => {
	switch (type) {
		case '1':
			return 'start-tag';
		case '2':
			return 'wait-tag';
		case '3':
			return 'agree-tag';
		case '4':
			return 'refuse-tag';
		default:
			break;
	}
};
//不能撤销不显示更多
const canCancel = (row: any) => {
	if (row.status == 2 && row.canCancel == false) {
		return false;
	} else {
		return true;
	}
};
//查看
//详情
const detail = ref('应用变更');
const showDetails = (row: any) => {
	let canCancel: any = null; //判断是否能够撤销传递给详情页
	if (row.status == 2 && row.canCancel == false) {
		canCancel = false;
	} else {
		canCancel = true;
	}
	router.push({
		path: '/digitalImplement/detail/revDetail',
		query: {
			id: row.impId,
			reallyId: row.id,
			appCode: row.appCode,
			instanceId: row.processInstanceId,
			title: detail.value,
			// status: row.status,
			processInstanceId: row.processInstanceId,
			pageTap: 'appChang',
			canCancel: canCancel,
		},
	});
};

//撤销
const withdraw = (instanceId: any) => {
	let data = {
		processInstanceId: instanceId,
	};
	cancel(data)
		.then((res: any) => {
			getTableData();
		})
		.catch((err: any) => {
			console.log('取消弹框和失败回调');
		});
};
//删除
const del = (id: any) => {
	ElMessageBox.confirm('是否确定此条信息?', '', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		center: true,
	})
		.then(() => {
			changeDelete(id).then((res) => {
				if (res.code == 0) {
					getTableData();
				}
			});
		})
		.catch(() => {});
};

//编辑
const reToEdit = (row: any) => {
	router.push({
		path: '/digitalImplement/detail/appliPage',
		query: {
			id: row.impId,
			reallyId: row.id,
			appCode: row.appCode,
			instanceId: row.processInstanceId,
			title: '实施填报',
			type: 2,
			processInstanceId: row.processInstanceId,
		},
	});
};
</script>
<style scoped lang="scss">
.layout-padding {
	overflow: auto;
	:deep(.el-tabs--border-card > .el-tabs__content) {
		padding: 0px;
	}

	.seach {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
		.seach_r {
			display: flex;
			.input {
				display: flex;
				margin-right: 10px;
			}
		}
	}
	.table {
		width: 100%;
	}
}

.moreBot {
	:deep(.block-col-2 .demonstration) {
		display: block;
		color: var(--el-text-color-secondary);
		font-size: 14px;
		margin-bottom: 20px;
	}

	:deep(.block-col-2 .el-dropdown-link) {
		display: flex;
		align-items: center;
	}
}
</style>
